<template>
	<div>
	<div class="title">热销推荐</div>
	<ul>
		<li class="item border-bottom" 
		    v-for="item of recommendList" 
		    :key="item.id">
		    	<img class="item-img" :src="item.imgUrl">
		    <div class="item-info">
		    	<p class="item-title">{{item.title}}</p>
		    	<p class="item-desc">{{item.desc}}</p>
		    	<button class="item-button">查看详情</button>
		    </div>
		</li>
	</ul>
    </div>
</template>

<script>
export default {
	name: "HomeRecommend",
	data () {
		return {
			recommendList: [{
			id: '0001',
			imgUrl: 'http://img1.qunarzz.com/sight/p0/1910/6f/6f3fa8d8f8e14b66a3.water.jpg_200x200_4f294e8c.jpg',
			title: '大连圣亚海洋公园',
			desc: '浪漫大连首站，浪漫的海洋公园'
		}, {
			id: '0002',
			imgUrl: 'http://img1.qunarzz.com/sight/p0/1910/e8/e8e2083829389f26a3.water.jpg_200x200_9704392c.jpg',
			title: '世界之窗',
			desc: '深圳的世界之窗'
		}, {
			id: '0003',
			imgUrl: 'http://img1.qunarzz.com/sight/p0/201301/16/4593d3d5a27f445b93835fbb.jpg_200x200_2fcb6c78.jpg',
			title: '东部华侨城',
			desc: '深圳的东部华侨城'
		}]
		}
	}
}
</script>

<style lang="stylus" scoped>
    @import '~styles/mixins.styl'
	.title
	  margin-top: .2rem
	  line-height: .8rem
	  background: #eee
	  text-indent: .2rem
	.item
	  overflow: hidden
	  display: flex
	  height: 1.9rem
	  .item-img
	    height: 1.7rem
	    width: 1.7rem
	    padding: .1rem
	  .item-info
	    flex: 1
	    text-align: left
	    padding: .1rem
	    min-width: 0
	    .item-title
	      line-height: .54rem
	      font-size: .32rem
	      ellipsis()
	    .item-desc
	      line-height: .4rem
	      color: #ccc
	      ellipsis()
	    .item-button
	      line-height: .44rem
	      background: #ff9300
	      padding: 0 .2rem
	      margin-top: .16rem
	      border-radius: .06rem
	      color: #fff
	
</style>